<template>
  <div class="login">
    <div class="logoBox">HIXUE</div>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 15, message: '请输入6-15个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { type: 'string', min: 6, max: 15, message: '请输入6-15个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
          this.$router.push({path: '/home/index'})
          // 记录登陆的用户名存在缓存中使用
          localStorage.name = escape(this.formInline.user)
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.login{
  width:100%;height:100%;min-height: 100%;padding: 1.8rem 0.5rem 0rem;
  overflow: hidden;
  background-color: #2c3e50;
  .ivu-form{
    .ivu-form-item{
      display: block;margin-right: 0;margin-bottom: 0.25rem;
      .ivu-btn{
        width: 100%;
        span{display: block;width: 100%;height: 30px;line-height: 30px;text-align: center;}
      }
    }
  }
  .logoBox{
    width: 100%;
    margin: 0 auto;
    font-size: 3.5em;
    font-weight: bold;
    color: #fff;
    // .logoImg{width: 100%; height: 100%; background-size: 100%;}
  }
}
</style>
